<template>
  <div class="chatGPt" id="chatGPt">
    <div class="chat_body">
      <!-- 左侧 -->
      <div class="chat_left" :class="[isLeftWidth ? 'left_width1' : 'left_width2']">
        <div class="left_box">
          <!-- 收起模块 -->
          <div v-if="isLeftWidth" class="packup_class">
            <!-- <div class="packup_logo" @click="skipPageClick">
              助手
            </div> -->
            <div class="packup_btn">
              <div class="btn_icon1" @click="newCreateChatClick(2)">
                <img src="../../assets/images/chatgpt/create.png" class="img2" alt="" />
              </div>
            </div>
            <div class="left_bottom left_bottom_packUp">
              <svg-icon v-if="isLeftWidth" icon-class="pack_up" class="packUp_icon packUp_icon1"
                @click="leftUpPackClick"></svg-icon>
            </div>
          </div>
          <!-- 展开模块 -->
          <div v-else class="unfold_class">
            <div class="left_header_box">
              <!-- 标题logo -->
              <div class="left_header">
                <div class="left_header_logo" @click="skipPageClick">

                  <div v-if="!isLeftWidth" class="title_box">
                    <span class="left_title1">{{ $t('chatGpt.title') }}</span>
                  </div>
                </div>
                <div class="left_header_icon">
                  <div v-if="!isLeftWidth">
                    <div class="left_title2" @click="openHistoryListClick()">{{ $t('chatGpt.history') }}</div>
                  </div>
                  <svg-icon icon-class="pack_up" class="packUp_icon1" @click="leftUpPackClick"></svg-icon>
                </div>
              </div>
              <div class="unfold_btn_create" @click="newCreateChatClick(2)">
                <img src="../../assets/images/chatgpt/create.png" style="width:25px" alt="" />
                <el-tooltip effect="dark" :content="$t('chatGpt.add')" placement="top-start">
                  <span class="create_text">{{ $t('chatGpt.add') }}</span>
                </el-tooltip>
              </div>
            </div>

            <!-- 左侧- 语境中心 -->
            <div class="history_list">
              <!-- 语境/智能体中心列表 -->
              <div class="tab_pane">
                <div class="context_box" :class="[assistantId == v.id ? 'list_item_box_active' : '']"
                  v-for="(v, i) in contextList" :key="v.id" @click="contextClick(v, i)">
                  <div class="triangle_box">
                    <div class="triangle_icon"
                      :style="{ backgroundColor: `rgba(${v.bgColor},.15)`, color: `rgb(${v.fontColor})` }">
                      {{ v.titleText }}
                    </div>
                  </div>

                  <div class="context_box_right">
                    <div class="title">{{ v.titleName }}</div>
                  </div>
                  <div class="delete_btn1" @click.stop="apiHelperAddHelper(v)">
                    <el-icon style="color:#F56C6C">
                      <DeleteFilled />
                    </el-icon>
                  </div>
                </div>
              </div>
              <div class="pagination_box">
                <el-pagination class="pagination" layout="prev, pager, next"
                  :hide-on-single-page="requestStr.pageCount == 1" :pager-count="5" :total="requestStr.total"
                  :current-page="requestStr.page" :page-size="requestStr.size" @current-change="handleCurrentChange">
                </el-pagination>
              </div>
            </div>
            <div class="left_bottom">
              <div class="unfold_btn">
                <div class="btn1 " @click="newCreateChatClick(1)">
                  <img src="../../assets/images/chatgpt/agent.png" class="img1" alt="" />
                  <el-tooltip effect="dark" :content="$t('chatGpt.context')" placement="top-start">
                    <span>{{ $t('chatGpt.context') }}</span>
                  </el-tooltip>
                </div>
                <!-- @click="newCreateChatClick(2)" -->
                <!-- <div class="btn1">
                  <img src="../../assets/images/chatgpt/add1.png" class="img2" alt="" />
                  <el-tooltip effect="dark" content="创建智能体" placement="top-start">
                    <span>创建智能体</span>
                  </el-tooltip>
                </div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 历史对话  -->
      <transition name="history">
        <div v-if="historyRightBox" class="chat_left_history" v-loading="leftLoading" element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
          <!-- 历史会话列表 -->
          <div style="width:200px">
            <div class="history_drawer">
              <div class="history_title">
                <span>{{ $t('chatGpt.history') }}</span>
                <el-icon @click="closeHistoryListClick()"><Close /></el-icon>
              </div>
              <div class="create_btn" @click="newCreateChatClick(2)">{{ $t('chatGpt.add') }}</div>
              <div class="history_list_box">
                <div class="history_item_box" :class="[chatListId == v.id ? 'history_item_box_active' : '']"
                  v-for="v in sessionList" :key="v.id" @click="clickSession(v)">
                  <div v-if="!v.isTitle" class="item_title">
                    {{ v.title }}
                  </div>
                  <div class="history_delete_btn">
                    <span>{{ v.createTime }}</span>
                    <el-icon class="del_icon" @click.stop="deleteTitleClick(v)"><Delete /></el-icon>
                  </div>
                </div>
              </div>
              <div class="history_page">
                <el-pagination class="pagination" size="small" layout="prev, pager, next"
                  :hide-on-single-page="requestHistory.pageCount == 1" :pager-count="5" :total="requestHistory.total"
                  :current-page="requestHistory.page" :page-size="requestHistory.size"
                  @current-change="handleCurrentChangeHistory">
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </transition>
      <!-- 右侧 聊天模块/提示词 -->
      <div class="chat_right">
        <div v-if="isShowNavList == 'contextualAndDialogue'">
          <!-- 新建对话 -->
          <div v-if="isRightDivShow == 'chatList'">
            <!-- 语境中心标题 -->
            <div v-if="chatList.length == 0 && !isContextShow" class="call_word">
              <div class="call_wrod_box">
                <!-- <div class="ai_logo">
                  <img src="../../../../assets/images/chatgpt/ai1.png" />
                </div> -->
                <div class="right_content">
                  <!-- 语境推荐 -->
                  <yu-context-recommend-new ref="yuContextRecommendRefs"
                    @enterInfoClick="enterInfoClick"></yu-context-recommend-new>
                </div>
              </div>
            </div>
            <!-- 聊天列表 -->
            <div v-else class="chit_chat">
              <div class="chat_list" id="chat-content" ref="chatContentRefs">
                <div v-if="isContextShow" class="list_item ">
                  <div class="ai_logo " style="font-size: 40px;">
                    <!-- <img src="../../../../assets/images/chatgpt/ai1.png" /> -->
                    <svg-icon icon-class="ai_chat2"></svg-icon>
                  </div>
                  <div class="right_text  right_text_header">
                    <div class="ai_text1">{{ $t("chatGpt.chatTitle1") }}{{ ContextMessage.titleName }}</div>
                    <div class="ai_text2">
                      {{ ContextMessage.desc }}
                    </div>
                  </div>
                </div>
                <div v-for="(item, index) in chatList" :key="item.id">
                  <!-- 自己 -->
                  <div v-if="item.name == 'chat_username'" class="list_item">
                    <div class="chat_logoIcon">
                      <img :src="userStore.avatar" class="user-avatar" />
                    </div>
                    <div class="right_text">
                      {{ item.msg }}
                    </div>
                  </div>
                  <!-- ai -->
                  <div v-else class="list_item ">
                    <div class="ai_logo">
                      <!-- <img src="../../../../assets/images/chatgpt/ai1.png" /> -->
                      <svg-icon icon-class="ai_chat2" class="svgIconLogo"></svg-icon>
                    </div>
                    <div class="right_text_box">
                      <div class="name">
                        <img v-if="item.headImg" :src="$yuUtils.imgSrc(item.headImg)" style="width:20px" />
                        <svg-icon v-else icon-class="a-ziyuan64" class="icon_size1"></svg-icon>
                        <span>{{ item.name }}</span>
                      </div>
                      <div class="right_text ai_right_text">
                        <MdPreview :id="'md'+item?.id" :modelValue="item.msg" :previewTheme="MdEditorV3State.theme"
                          :codeTheme="MdEditorV3State.codeTheme" :codeFoldable="MdEditorV3State.codeFoldable" />
                        <MdCatalog :editorId="item?.id" :scrollElement="scrollElement" />

                        <div v-show="msgLoading && index == chatList.length - 1" class="stop_box">
                          <icon-loading style="color: #5e7afc;" />
                          <!-- <el-tag type="danger" class="stop_icon" @click="stopTextClick">
                          <svg-icon icon-class="stop"></svg-icon>
                          停止回答
                        </el-tag> -->
                        </div>
                        <!-- 引用 -->
                        <div v-if="item.flowResponses">
                          <div>
                            <el-divider content-position="left">
                              <i class="el-icon-s-flag" style="color:#e67e22;"></i>
                              <span style="color:#667085">{{ $t("chatGpt.quote") }}</span>
                            </el-divider>
                            <!-- <div>{{item.flowResponses}}</div> -->
                          </div>
                          <div>
                            <el-tag v-for="(item1, index) in showFastQuoteDocClick(item.flowResponses)" :key="index"
                              type="info" effect="plain" class="falstelTag"
                              @click="openFastGptQuoteClick(item.flowResponses)">
                              <i class="el-icon-tickets"></i>
                              {{ item1 }}
                            </el-tag>
                          </div>
                          <div class="FastQuote">
                            <!-- 引用总条数 -->
                            <el-tag v-if="textJsonParseFunc(item.flowResponses).quoteList.length != 0" effect="plain"
                              class="falstelTag" @click="openFastGptQuoteClick(item.flowResponses)">
                              {{ textJsonParseFunc(item.flowResponses).quoteList.length }}{{ $t("chatGpt.quoteCount") }}
                            </el-tag>
                            <!-- <el-tag type="success" effect="plain" class="falstelTag">{{textJsonParseFunc(item.flowResponses).runningTime}}s</el-tag> -->
                          </div>
                          <!-- <el-tag>{{item.flowResponses.length}}条引用</el-tag> -->
                        </div>
                        <div v-if="item.msgFileList">
                          <div>
                            <el-divider content-position="left">
                              <i class="el-icon-s-flag" style="color:#e67e22;"></i>
                              <span style="color:#667085">{{ $t("chatGpt.quote") }}</span>
                            </el-divider>
                            <!-- <div>{{item.flowResponses}}</div> -->
                          </div>
                          <div>
                            <el-tag v-for="(item1, index) in item.msgFileList" :key="index" type="info" effect="plain"
                              class="falstelTag" @click="lookFile(item1)">
                              <!-- <i class="el-icon-tickets"></i> -->
                              <svg-icon :icon-class="selectSvgIcons(item.msgFileList[index])"
                                style="font-size: 16px;"></svg-icon>
                              {{ item1.document_name }}
                            </el-tag>
                          </div>
                        </div>
                        <!-- 重新回答和复制 -->
                        <div v-if="!msgLoading && index == chatList.length - 1" class="list_foot">
                          <div class="reanswer_btn" @click="reanswerClick()">
                            <img src="../../assets/images/chatgpt/refresh.png" style="width:20px;" alt="" />
                            <span>{{ $t("chatGpt.reanswerBtn") }}</span>
                          </div>
                          <div class="copy" @click="copyClick(item.msg)">
                            <img src="../../assets/images/chatgpt/copy.png" style="width:24px;" alt="" />
                          </div>
                        </div>
                        <div v-if="index != chatList.length - 1" class="list_foot">
                          <div></div>
                          <div class="copy" @click="copyClick(item.msg)">
                            <img src="../../assets/images/chatgpt/copy.png" style="width:24px;" alt="" />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 输入框位置 -->
            <div class="right_foot">
              <div class="foot_box">
                <div v-show="callWordDiv" class="call_word_list"
                  :class="[callWordDiv ? 'call-word-input-true' : 'call-word-input-false']"
                  v-loading="requestStr_callWord_Loading">
                  <div class="one_row">
                    <!-- 推荐模板 -->
                    <div class="one_row_left">
                      <div class="title">{{ $t("chatGpt.temp1") }}</div>
                      <div class="btn" v-for="v in callWordList_one" :key="v.id" @click="callWordListClick(v)">
                        {{ v.title }}
                      </div>
                    </div>
                    <div class="one_row_right " @click="getTableData">
                      <img src="../../assets/images/chatgpt/voiceprint.png" style="width:22px;" alt="" />
                    </div>
                  </div>
                  <div class="one_row">
                    <!-- 常用模板 -->
                    <div class="one_row_left">
                      <div class="title">{{ $t("chatGpt.temp2") }}</div>
                      <div class="btn" v-for="v in callWordList_two" :key="v.id" @click="callWordListClick(v)">
                        {{ v.title }}
                      </div>
                    </div>
                    <div class="one_row_right two_row_right" @click="callWordList_moreClick">
                      <span>{{ $t("chatGpt.more") }}</span>
                      <img src="../../assets/images/chatgpt/right.png" style="width:24px;" alt="" />
                    </div>
                  </div>
                </div>
                <div class="input_box" :class="[callWordDiv ? 'input_box_radius_0' : 'input_box_radius']">
                  <transition name="InputModelBox">
                    <!-- v-show="!isInputModelBox" -->
                    <div class="input_box_top">
                      <!-- <div class="btn_div model_classify" style="margin-right: 10px;">
                        <el-select v-model="modelClassify" @change="modelClassify_change" @focus="modelClassify_focus">
                          <el-option :label="$t('chatGpt.firstModel1')" value="1"> </el-option>
                          <el-option :label="$t('chatGpt.firstModel2')" value="2"> </el-option>
                        </el-select>
                      </div> -->
                      <!-- 通用模型 -->
                      <div v-if="modelClassify == '1'" class="model_list" @click="modelClassify_focus">
                        <el-popover placement="top-start" width="260" trigger="hover">
                          <div class="model_list_box" v-for="(item, index) in modelList" :key="index">
                            <div class="name_img">
                              <!-- <img :src="imageDefaultFunc(item.iconUrl)" style="width: 20px; " alt="" /> -->
                              <img src="../../assets/images/chatgpt/ai3.png" style="width: 20px; " alt="" />
                              <span> {{ item.modelName }} </span>
                            </div>
                            <div>
                              <el-radio v-model="chatModelType" :label="item.value"
                                @input="chatModelType_input($event, item)">{{ ""
                                }}</el-radio>
                            </div>
                          </div>
                          <!-- 知识库问答 qanything 知识库问答FastGPT fastgpt 本地chatGLM3-->
                          <!-- <template v-for="(item) in knowledge_base_list">
                            <div v-if="$store.state.settings.knowledge_base_state == item.type" :key="item.value"
                              class="model_list_box">
                              <div class="name_img">
                                <img :src="item.iconUrl" style="width: 20px; " alt="" />
                                <span>
                                  {{ $store.state.settings.knowledge_base_state
                                    == 2 ? $store.state.settings.knowledge_base_name : item.modelName }}
                                </span>
                              </div>
                              <div>
                                <el-radio v-model="chatModelType" :label="item.value" @input="chatModelType_input">{{ ""
                                  }}</el-radio>
                              </div>
                            </div>
                          </template> -->

                          <template #reference>
                            <div class="model_list_btn">
                              <img src="../../assets/images/chatgpt/ai3.png" style="width: 20px; " alt="" />
                              <span>{{ ModelListRow.modelName }}</span>
                              <el-icon>
                                <ArrowUp />
                              </el-icon>
                            </div>

                          </template>
                        </el-popover>
                      </div>
                      <!-- 知识库应用 -->
                      <div v-if="modelClassify == '2'" class="model_classify">
                        <el-select v-model="wikiAppActive" value-key="id" @change="wikiAppActive_change">
                          <el-option v-for="(item) in wikiAppList" :key="item.id" :label="item.appName" :value="item">
                          </el-option>
                        </el-select>
                      </div>
                      <!-- <div class="btn_div" @click="newCreateChatClick(2, 'inputFoucs')">
                        <el-icon>
                          <Delete />
                        </el-icon>
                      </div> -->
                      <div class="btn_div" @click="downloadChatListClick">
                        <el-icon>
                          <Download />
                        </el-icon>
                      </div>
                      <div class="btn_div comes_with_history" @click="sendTextFocus()">
                        {{ $t("chatGpt.msgCount") }}
                        <el-select v-model="messageValue" class="select_msg_count" @focus="modelClassify_focus">
                          <el-option v-for="item in messageOptions" :key="item.value" :label="item.label"
                            :value="item.value"> </el-option>
                        </el-select>
                      </div>
                      <div v-if="ModelListRow.value == '108'" class="btn_div">
                        <el-button @click="openFileList()">{{ $t("chatGpt.docList") }}</el-button>
                      </div>
                    </div>
                  </transition>
                  <!-- 输入框 -->
                  <div class="input_box_input">
                    <el-input type="textarea" id="textareaMsg" ref="textInputRefs"
                      :autosize="{ minRows: 1, maxRows: 12 }" class="textarea textInput1" resize="none"
                      :placeholder="inputPlaceholder + `${$t('chatGpt.CtrlEnter')}`" v-model="inputMsg"
                      @keyup.ctrl.enter.native="handleKeyPress" @keydown.enter.exact.native="enterSubmit" @input="sendTextInput"
                      @blur="sendTextBlur" @focus="sendTextFocus"></el-input>
                    <div class="send_btn_box">
                      <!-- 录音 -->
                      <div class="voice_box">
                        <img v-if="isSpeakType == 1" src="../../assets/images/chatgpt/mic.png" style="width:14px;"
                          alt="" @click="startRecordAudio" />
                        <div v-else-if="isSpeakType == 2">
                          <div class="loaderRectangle" @click="stopRecordAudio">
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                          </div>
                        </div>

                        <div v-else-if="isSpeakType == 3" class="SpeakType3">
                          <i class="el-icon-loading"></i>
                          <span>转码中...</span>
                        </div>
                      </div>
                      <div class="send_btn" @click="sendText">{{ $t("chatGpt.sendBtn") }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!--右侧- 语境中心-智能体 -->
          <div v-if="isRightDivShow == 'isContextList'" class="right_context_box">
            <yu-context-all ref="YuContextAllRefs" @skipChatpage="skipChatpage_YuContextAll"
              @addOrdelClick="addOrdelClick_YuContextAll"></yu-context-all>
          </div>
          <div v-if="isRightDivShow == 'isCollWordList'" class="right_context_box">
            <yu-coll-word-all ref="YuCollWordAllRefs" @callWordListClick="callWordListClick"></yu-coll-word-all>
          </div>
        </div>
        <div v-else-if="isShowNavList == 'PPT'">
          <!-- <createPpt :ModelListRow="ModelListRow" :chatModelType="chatModelType" ref="createPptRefs" /> -->
        </div>
        <!-- 文档工具聊天页面 -->
        <div v-else-if="isShowNavList == 'docTool'">
          <!-- <doc-idea-tool-qa ref="docIdeaToolQARefs" @gobackClick="gobackClick_docIdeaToolQA"></doc-idea-tool-qa> -->
        </div>
      </div>
      <!-- 文档工具助手 暂时注释 -->
      <transition name="docIdea">
        <div v-show="isDocIdeaDrawer" class="dic_idea_drawer">
          <doc-idea-drawer @closeDocIdeaDrawer="closeDocIdeaDrawer"
            @docToolClick="docToolClick_docIdeaDrawer"></doc-idea-drawer>
        </div>
      </transition>
    </div>

    <!-- 打开文档工具按钮 -->
    <div v-if="!isDocIdeaDrawer" class="doc_idea">
      <div class="doc_idea_box" @click="openDocIdeaDrawer">
        <svg-icon icon-class="idea"></svg-icon>
      </div>
    </div>

    <!-- <chat-moeny-info-dialog ref="chatMoenyInfoDialogRefs"></chat-moeny-info-dialog> -->
    <!-- <sync-knowledge-list ref="syncKnowledgeListRefs"></sync-knowledge-list> -->
    <!-- fastGpt知识库引用 -->
    <!-- <fast-gpt-quote ref="FastGptQuoteRefs"></fast-gpt-quote> -->
  </div>
</template>

<script setup lang="ts">
/**markdown -----start */
// import { MdEditor } from 'md-editor-v3';
// import 'md-editor-v3/lib/style.css';
import { MdPreview, MdCatalog } from 'md-editor-v3';
// preview.css相比style.css少了编辑器那部分样式
import 'md-editor-v3/lib/preview.css';
const scrollElement = document.documentElement;
/**Markdown编辑器 */
const MdEditorV3State = reactive({
  theme: 'github',
  codeTheme: 'github',
  codeFoldable: false,
});
/**markdown -----end */
import chatAgentApi from '@/api/chatgpt/chatAgentApi';
import { aiqaWikiRecordList, aiqaSensitiveCheckSensitive, aiqaWikiRecordCreate, aiqaWikiRecordUpdate, aiqaWikiRecordDelete, aiqaWikiAppsCrCount, aiqaWikiAppsGetAuthorizedByDataSetId } from '@/api/chatgpt/chatgptApis';
import { saveAs } from "file-saver";

// import chatWindowApi from "@/api/chatgpt/chatWindowApi.js";
// import chatSensitiveWordApi from "@/api/peizhi/chatSensitiveWordApi.js";
// import contextCenterApi from "@/api/peizhi/contextCenterApi.js";
// import callWordApi from "@/api/peizhi/callWordApi.js";
// import modelManagerApi from "@/api/peizhi/modelManagerApi.js";
// import universalApi from "@/api/peizhi/universalApi.js";
// import libraryManagementApi from "@/api/peizhi/libraryManagementApi.js";
// import newMergeApi from "@/api/peizhi/newMergeApi.js";

import Recorder from "js-audio-recorder";
import axios from "axios";

import ChatMoenyInfoDialog from "../../components/chat-moeny-info-dialog.vue";
import YuContextRecommendNew from "./components/chat-agent/yu-context-recommend-new.vue";
import YuContextAll from "./components/chat-agent/yu-context-all.vue";
import YuCollWordAll from "./components/chat-agent/yu-coll-word-all.vue";
// import createPpt from "./components/create-ppt.vue";
// import SyncKnowledgeList from "./components/sync-Knowledge-list.vue";//暂时注释
// import FastGptQuote from "../../components/fast-gpt-quote.vue";//暂时注释
import DocIdeaDrawer from "./components/chat-agent/doc-idea-drawer.vue";
// import DocIdeaToolQa from "./components/doc-idea-tool-qa.vue";//暂时注释
import { YUgetQueryParams, selectSvgIcon } from "@/utils/yuUtils.js";
// components: {
//     MarkdownItVue,
//     ChatMoenyInfoDialog,
//     userAvatar,
//     YuContextRecommendNew,
//     YuContextAll,
//     YuCollWordAll,
//     createPpt,
//     SyncKnowledgeList,
//     FastGptQuote,
//     DocIdeaDrawer,
//     DocIdeaToolQa
//   },

import useUserStore from '@/store/modules/user';
import { getToken } from '@/utils/auth';
const userStore = useUserStore();
const { proxy } = getCurrentInstance() as any;
const router = useRouter();
const route = useRoute();

// import logoImgs from '@/assets/images/logo1.png';
const difyVal = ref("");
const chunkValue = ref("");
const dify_conversationId = ref("");
// const logoImg = logoImgs
const msgLoading = ref(false);
const isLeftWidth = ref(false);
const LeftWidthClass = ref("");
const inputMsg: any = ref("");
const inputPlaceholder = ref(proxy.$t("chatGpt.inputPlaceholder"),)
const placeholderTemp = ref(proxy.$t("chatGpt.inputPlaceholder"),)
const chatListId = ref("")
const chatList = ref([])
const sessionList = ref([])//历史会话
const leftLoading = ref(false)//历史会话
//语境中心(智能中心)会话列表分页
const requestStr = ref({
  page: 1,
  size: 20,
  total: 0,
  pageCount: 0
})
// 历史列表的分页
const requestHistory = ref({
  page: 1,
  size: 20,
  total: 0,
  pageCount: 0
})
const leftTabsActive = ref("history")
const isRightDivShow = ref("chatList")//chatList:聊天列表,isContextList:语境中心列表,isCollWordList:提示词列表
const isContextShow = ref(false)//语境中心消息显示
const contextList = ref([])//语境中心列表
const assistantId = ref("")//语境中心聊天id
const ContextMessage: any = ref({
  titleName: "",
  desc: ""
})//语境中心
const callWordDiv = ref(false) // //提示词
const requestStr_callWord = ref({
  page: 1,
  size: 6,
  total: 0,
  pageCount: 1
})
const callWordList_one = ref([])//推荐的提示词
const callWordList_two = ref([])//常用的提示词
const requestStr_callWord_Loading = ref(false)
const chatModelType = ref(1)//模型type
const modelList = ref([])
const ModelListRow: any = ref({})
const messageValue = ref(4)// 历史消息数
const messageOptions = ref([
  { label: `0${proxy.$t("chatGpt.msgCount1")}`, value: 0 },
  { label: `2${proxy.$t("chatGpt.msgCount1")}`, value: 2 },
  { label: `4${proxy.$t("chatGpt.msgCount1")}`, value: 4 },
  { label: `8${proxy.$t("chatGpt.msgCount1")}`, value: 8 },
  { label: `12${proxy.$t("chatGpt.msgCount1")}`, value: 12 },
  { label: `16${proxy.$t("chatGpt.msgCount1")}`, value: 16 }
])
const navList = ref([
  {
    title: "文档创作",
    command: "document",
    icon: "file-close"
  },
  {
    title: "PPT生成",
    command: "PPT",
    icon: "PPT"
  },
  {
    title: "智能翻译",
    command: "translate",
    icon: "weibiaoti-2"
  }
])// 智能探索
const isShowNavList = ref("contextualAndDialogue")
const knowledge_base: any = ref({
  qanythingKey: "",
  fastGptKey: "",
  base_url: ""
})
// const knowledge_base_list = ref([
//   { modelName: "本地AI知识库", iconUrl: require("../../../../assets/images/home/knowledge.png"), value: "108", type: 1 },
//   { modelName: "知识库问答FastGPT", iconUrl: require("../../../../assets/images/chatgpt/ai3.png"), value: "109", type: 2 },
//   { modelName: "本地chatGLM3", iconUrl: require("../../../../assets/images/chatgpt/glm.jpg"), value: "110", type: 3 }
// ])
const knowledge_base_list = ref([])
const modelClassify = ref("1")//1:通用模型,2:知识库应用
const wikiAppList = ref([])//存放知识库应用
const wikiAppActive = ref({})
const large_model = ref({
  address: ""
})
// 历史对话弹出框
const historyRightBox = ref(false)
// 文档工具对话框
const isDocIdeaDrawer = ref(false)
// 输入框上面显示选中模型
const isInputModelBox = ref(false)
/**语言录入----start */
//使用吴江的接口
const textInputRefs: any = ref()
const isSpeakType = ref(1)//1:静默状态,还未点击开始录音,2:开始录音,3:结束录音,正在转换中
const recorder: any = new Recorder({
  sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
  sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
  numChannels: 1 // 声道，支持 1 或 2， 默认是1
  // compiling: false,(0.x版本中生效,1.x增加中)  // 是否边录边转换，默认是false
})
/**语言录入----end */


onMounted(() => {
  apiChatReGet();
  apiHelperGet();
  getConfig();
  if (route.query.questionString) {
    inputMsg.value = route.query.questionString;
  }

  getSystemServiceConfig();
  // this.apiWikiAppsAuthorized();
  if (modelClassify.value == "1") {
    //通用模型
    apiGptmodelGetList();
  } else {
    //知识库应用
    apiWikiAppsAuthorized();
  }
});

/**方法------------------------------------------------satrt */
const lookFile = (file: any) => {
  file.libraryType = "difyDoc";
  file.fileName = file.document_name.split('.')[0];
  file.id = file.document_id;
  let routerObj = YUgetQueryParams(file);
  console.log(routerObj);
  proxy.$yuUtils.OnlineofficeFunc(file, routerObj);
}

const selectSvgIcons = (v: any) => {
  return selectSvgIcon(v);
}
// 获取配置
const getConfig = async () => {
  // const res = await newMergeApi.apiParametersQuery({
  //   configType: 'sys_service_config',
  //   page: 0,
  //   size: 10,
  //   configInfo: 'knowledge_base'
  // });
  // const knowledgeBaseState = res.rows.find(item => item.configCode === 'knowledge_base_state');
  // difyVal.value = knowledgeBaseState.configValue
}
// 查询所有模型
const apiGptmodelGetList = () => {
  chatAgentApi.aiqaModelGet({ id: userStore.userId }).then((res: any) => {
    // this.modelList = res.obj
    if (res.data.length != 0) {
      //如果后台模型有数据
      modelList.value = res.data.filter((item) => {
        return item.enabled;
      });
      chatModelType.value = modelList.value[0].value;
      ModelListRow.value = modelList.value[0];
      // console.log(this.modelList.length, this.$store.state.settings.knowledge_base_state != 0);
      // console.log(this.ModelListRow, "ModelListRow");
    } else {
      //如果后台模型没有数据,系统服务配置中的知识库开起的话,就设置默认值
      // if (this.$store.state.settings.knowledge_base_state != 0) {
      //   ModelListRow.value = knowledge_base_list.value.find((item) => item.type == this.$store.state.settings.knowledge_base_state);
      //   chatModelType.value = ModelListRow.value?.value;
      // }
    }
    // console.log(this.chatModelType, "chatModelType");
    // console.log(this.ModelListRow, "ModelListRow");
  });
}
// 获取知识库应用模型列表
const apiWikiAppsAuthorized = () => {
  // libraryManagementApi
  //   .apiWikiAppsAuthorized({
  //     deptId: userStore.deptId,
  //     userId: userStore.userId
  //   })
  //   .then((res) => {
  //     wikiAppList.value = res.obj;
  //     if (wikiAppList.value.length != 0) {
  //       wikiAppList.value.forEach((item) => {
  //         item.modelName = item.appName;
  //       });
  //       wikiAppActive.value = wikiAppList.value[0];
  //       ModelListRow.value = wikiAppActive.value;
  //       chatModelType.value = 1001;
  //     }
  //   });
}
// 切换选择一级模型
const modelClassify_change = (val: any) => {
  if (val == "1") {
    //通用模型
    apiGptmodelGetList();
  } else {
    //知识库应用
    apiWikiAppsAuthorized();
  }
}

// 选择模型获取焦点
const modelClassify_focus = () => {
  sendTextFocus();
}
// 点击了知识库应用模型
const wikiAppActive_change = (val) => {
  ModelListRow.value = val;
  chatModelType.value = 1001;
  sendTextFocus();
}

// 获取系统配置信息
const getSystemServiceConfig = () => {
  // universalApi
  //   .apiParametersQueryByCoeds([
  //     {
  //       code: "knowledge_base_key,knowledge_base_url,large_model_address",
  //       type: "sys_service_config"
  //     }
  //   ])
  //   .then((res) => {
  //     let knowledge_base_key = res.obj.knowledge_base_key.configValue.split("|");
  //     knowledge_base.qanythingKey = knowledge_base_key[0];
  //     knowledge_base.value.fastGptKey = knowledge_base_key[1];
  //     knowledge_base.value.base_url = res.obj.knowledge_base_url.configValue;
  //     large_model.value.address = res.obj.large_model_address.configValue;
  //     // console.log(this.knowledge_base, "this.knowledge_base");
  //   });
}
/**左侧事件==========================================================start */
//查询会话列表
const apiChatReGet = () => {
  leftLoading.value = true;
  aiqaWikiRecordList({
    userId: userStore.userId,
    pageNum: requestHistory.value.page,
    pageSize: requestHistory.value.size,
    sort: "id,desc"
  })
    .then((res: any) => {
      leftLoading.value = false;
      res.rows.forEach((item) => {
        item.isTitle = false;
      });
      sessionList.value = res.rows;
      requestHistory.value.total = res.total;
      requestHistory.value.pageCount = res.pageSize;
    })
    .catch((err) => {
      leftLoading.value = false;
    });
}
// 会话列表分页
const handleCurrentChangeHistory = (val: any) => {
  requestHistory.value.page = val;
  apiChatReGet();
}
// 左侧侧边栏展开/收起
const leftUpPackClick = () => {
  isLeftWidth.value = !isLeftWidth.value;
}
// 背景颜色切换
const bgColorSwitchClick = (str: any) => {
  // backgroundColor.value = str;
  localStorage.setItem("backgroundColor", str);
}
// 语境中心和新建对话的按钮 1:语境中心 2:新建对话/提示词
const newCreateChatClick = (val: any, type?: any) => {
  if (type == "inputFoucs") {
    //这个判断是点击的时候,输入框失去焦点,输入框上面的div不隐藏
    sendTextFocus();
  }
  isShowNavList.value = "contextualAndDialogue";
  isContextShow.value = false;
  if (val == 1) {
    leftTabsActive.value = "context";
    isRightDivShow.value = "isContextList";
  }
  if (val == 2) {
    leftTabsActive.value = "history";
    isRightDivShow.value = "chatList";
    clearDataFunc();
    // if (this.sessionList[0].reCount == 0) {
    //   this.$message.success("请先尝试问我一个问题，再新建对话窗口吧!");
    //   this.chatListId = this.sessionList[0].id;
    // } else {
    //   this.apiChatReCreate({
    //     title: "新对话窗口",
    //     record: [],
    //     reCount: 0,
    //   }); //创建对话
    // }
  }
  handleClick(); //tabs切换
}
// 单击了会话列表的某一项
const clickSession = (v: any) => {
  clearDataFunc(); //清空
  chatList.value = JSON.parse(v.record);
  chatListId.value = v.id;
  isRightDivShow.value = "chatList";
  isContextShow.value = false;
}
// 单击了左侧语境中心列表的某一项
const contextClick = (v: any, i?: any) => {
  clearDataFunc(); //清空
  ContextMessage.value = JSON.parse(JSON.stringify(v));
  isRightDivShow.value = "chatList";
  isContextShow.value = true;
  assistantId.value = v.id;
  inputPlaceholder.value = v.example;
  apiChatReGetAssistant(v); //查询单条语境中心列表
}
// 清空对话框数据
const clearDataFunc = () => {
  chatList.value = [];
  chatListId.value = "";
  assistantId.value = "";
  Object.keys(ContextMessage.value).forEach((key) => (ContextMessage.value[key] = ""));
  inputPlaceholder.value = placeholderTemp.value;
}
// tabs切换
const handleClick = (val?: any) => {
  // this.leftTabsActive = val;
  // this.requestStr.page = 1;
  // this.requestStr.total = 0;
  // if (this.leftTabsActive == "context") {
  //   this.apiHelperGet();
  // } else {
  //   this.apiChatReGet();
  // }
}
// 打开历史对话框
const openHistoryListClick = () => {
  // if (this.historyRightBox == false) {
  //   this.historyRightBox = true;
  // } else {
  //   setTimeout(() => {
  //     this.historyRightBox = false;
  //   }, 300);
  // }
  historyRightBox.value = true;
}
// 关闭历史对话框
const closeHistoryListClick = () => {
  historyRightBox.value = false;
}
// 点击左侧历史会话的修改标题按钮
const updateTitleClick = (v: any) => {
  if (sessionList.value.some((item) => item.isTitle == true)) {
    return;
  }
  v.isTitle = !v.isTitle;
}
//修改标题-失去焦点
const updateTitleBlur = (v: any) => {
  apiChatReModify({
    id: v.id,
    title: v.title
  });
}

// 删除左侧历史会话的某一项
const deleteTitleClick = (v: any) => {
  aiqaWikiRecordDelete([v.id]).then((res: any) => {
    if ((chatListId.value = v.id)) {
      newCreateChatClick(2);
    }
    apiChatReGet();
  });
}
// 语境中心/智能体的分页查询列表
const handleCurrentChange = (val: any) => {
  requestStr.value.page = val;
  // if (this.leftTabsActive == "history") {
  //   this.apiChatReGet();
  // } else {
  apiHelperGet();
  // }
}
/**左侧事件结束============================================================end */



// /**发送消息============================================================start */

// 重新回答
const reanswerClick = () => {
  inputMsg.value = chatList.value[chatList.value.length - 2].msg;
  sendText();
}
// 发送消息
const sendText = () => {

  let chatMsgObj = {
    headImg: "",
    name: "chat_username",
    time: proxy.$moment().format("YYYY-MM-DD hh:mm:ss"),
    msg: inputMsg.value,
    chatType: 0, //信息类型，0文字，1图片
    uid: "jcm" //uid
  };
  //如果消息不为空
  if (inputMsg.value.trim() === "") {
    proxy.$modal.msgWarning(proxy.$t("chatGpt.chatMsg1"));
  } else {
    // // //语境中心需要多发送一条消息
    // if (this.isContextShow && this.chatList.length == 0) {
    //   this.sendMsg({
    //     headImg: "",
    //     name: "chat_username",
    //     time: this.$moment().format("YYYY-MM-DD hh:mm:ss"),
    //     msg: this.ContextMessage.desc,
    //     chatType: 0, //信息类型，0文字，1图片
    //     uid: "jcm", //uid
    //   });
    // }
    apiChatReCheckSensitive(chatMsgObj);
  }
}
// 判断敏感字
const apiChatReCheckSensitive = (chatMsgObj: any) => {
  chatAgentApi.aiqaSensitiveCheckSensitive({ string: chatMsgObj.msg }).then((res: any) => {
    if (res.code === "500") {
      proxy.$modal.msgError(`${res.obj}`);
      return;
    }
    chatList.value.push(chatMsgObj);
    inputMsg.value = "";
    chatCompletion();
  });
}
// 发送消息的接口
const chatCompletion = async () => {
  let messages = [];

  let historyMessage = chatList.value.map((item) => {
    if (item.uid == "assistant") {
      return {
        role: "assistant",
        content: item.msg
      };
    } else {
      return {
        role: "user",
        content: item.msg
      };
    }
  });
  // 如果选择的 附带历史消息数 大于全部历史消息数
  if (historyMessage.length > messageValue.value) {
    let end = historyMessage.length - messageValue.value - 1;
    // 截取需要发送请求的消息列表
    historyMessage.splice(0, end);
  }
  // 如果语境中心,需要加一条消息
  if (isContextShow.value) {
    let mesg = [
      {
        role: "user",
        content: ContextMessage.value.command
      }
    ];
    messages = [...mesg, ...historyMessage];
  } else {
    messages = historyMessage;
  }
  // 新增一个机器人的空消息
  let chatBeforResMsg = {
    headImg: ModelListRow.value.iconUrl,
    name: ModelListRow.value.modelName,
    time: proxy.$moment().format("YYYY-MM-DD hh:mm:ss"),
    msg: "",
    chatType: 0, //信息类型，0文字，1图片
    uid: "assistant" //uid
  };
  sendMsg(chatBeforResMsg);
  let currentResLocation = chatList.value.length - 1;
  let headers = {
    Authorization: getToken(),
    "Content-Type": "application/json",
    Accept: "text/event-stream",
    Connection: "keep-alive",
    "api-key": ModelListRow.value.modelKey,
    "api-type": chatModelType.value
  };
  msgLoading.value = true;
  // console.log(this.chatModelType, this.ModelListRow, 1111);
  // 知识库应用模型
  if (modelClassify.value == "2") {
    if (difyVal.value === '4') {
      let difyParams = {
        query: messages[messages.length - 1].content,
        token: ModelListRow.value.appKey // 唐云龙接口使用,直连请注释
      }
      await fetch("/api/aiDify/chat-messages", {
        method: "POST",
        timeout: 0,
        headers: {
          'Authorization': getToken(), // 唐云龙接口使用,直连请注释
          // Authorization: `Bearer ${this.ModelListRow.appKey}`, // 直连接口使用,唐云龙接口请注释
          "Content-Type": "application/json"
        },
        body: JSON.stringify(difyParams),
      }).then(response => response.body.getReader()).then(async reader => {
        const decoder = new TextDecoder()
        let buffer = "" // 缓存不完整的数据块

        while (true) {
          const { done, value } = await reader.read()
          if (done) break

          buffer += decoder.decode(value, { stream: true }) // 将新数据追加到缓存

          // 按行分割数据
          const lines = buffer.split("\n")
          buffer = lines.pop() // 剩下的不完整数据保留在 buffer 中

          lines.forEach(line => {
            if (line.trim() === "") return

            try {
              const parsedItem = JSON.parse(line.trim().replace(/^data:\s*/, "")) // 去掉前缀
              if (parsedItem.event === 'ping') return

              if (parsedItem.event === 'message') {
                chatList.value[currentResLocation].msg += parsedItem.answer
                scrollBottom()
              } else if (parsedItem.event === 'message_end') {
                msgLoading.value = false
                moreRequestData(messages)

                if (parsedItem.metadata && parsedItem.metadata.retriever_resources) {
                  const currentMsgFileList = chatList.value[currentResLocation].msgFileList || []
                  const existingDocIds = new Set(currentMsgFileList.map(item => item.document_id))

                  const uniqueFiles = parsedItem.metadata.retriever_resources.filter(item => {
                    if (!existingDocIds.has(item.document_id)) {
                      const fileExtension = item.document_name.split('.').pop()
                      item.suffix = fileExtension
                      existingDocIds.add(item.document_id)
                      return true
                    }
                    return false
                  }).map(item => ({
                    ...item,
                    type: item.suffix // 添加 type 字段
                  }))
                  chatList.value[currentResLocation].msgFileList = [...currentMsgFileList, ...uniqueFiles]
                  // console.log(this.chatList[currentResLocation].msgFileList, '123')
                }

                scrollBottom()
              }
            } catch (e) {
              console.error("Invalid JSON:", line)
            }
          })
        }
      })
    } else {
      let objParams = {
        messages: messages,
        stream: true,
        detail: true,
        chatId: ""
        // token: this.ModelListRow.appKey //唐云龙接口使用,直连请注释
      };
      // https://ekms.cdeden.cn:3000
      // this.knowledge_base.base_url
      // console.log(this.ModelListRow.appKey,'this.ModelListRow.appKey');
      chatList.value[currentResLocation].flowResponses = "";
      // let apiUrl = this.$store.state.api.baseApi;
      //唐云龙写的接口
      // await fetch(apiUrl + "/api/wiki/apps/proxy/completions", {
      //线上直连
      await fetch("/api/v1/chat/completions", {
        // await fetch("https://ekms.cdeden.cn/external-api/api/v1/chat/completions", {
        method: "POST",
        timeout: 120000,
        headers: {
          // Authorization: getToken(), //唐云龙接口使用,直连请注释
          Authorization: `Bearer ${ModelListRow.value.appKey}`, //直连接口使用,唐云龙接口请注释
          "Content-Type": "application/json"
        },
        body: JSON.stringify(objParams)
      })
        .then((response) => {
          return response;
        })
        .then((response) => {
          // console.log(response);
          const reader = response.body.getReader();
          // let _this = this;
          function readStream(reader) {
            return reader.read().then(({ done, value }) => {
              if (done) {
                msgLoading.value = false;
                moreRequestData(messages);
                // console.log(1234,"结束");
                return;
              }
              let decoded = new TextDecoder().decode(value);
              // console.log(value,'value');
              console.log(decoded);

              // 将上一次未处理完的部分和本次解码的部分拼接起来
              if (chatList.value[currentResLocation].reminder) {
                decoded = chatList.value[currentResLocation].reminder + decoded;
              }

              // 清空 reminder 防止重复拼接
              chatList.value[currentResLocation].reminder = "";

              // console.log(decoded, "11111");
              // let messages = rawData.split('\n\n').filter(Boolean); // filter(Boolean)去除空字符串
              // let decodedArray = decoded.split("\n\n");
              let decodedArray = decoded.split("event: ").slice(1);
              // console.log(decodedArray, "decodedArray");
              if (decodedArray.length == 0) {
                chatList.value[currentResLocation].flowResponses += decoded;
              }
              // 遍历并解析每条消息
              decodedArray.forEach((message) => {
                try {
                  let parts = message.split("\ndata:");
                  let eventType = parts[0].trim();
                  let dataStr = (parts[1] ? parts[1] : "").trim();
                  let data_decoded = null;
                  let flowResponses = null;
                  // console.log(parts);
                  // let flowResponses_context = null;
                  // console.log(dataStr,111);
                  if (eventType == "flowResponses") {
                    //这里存放引用的数组
                    flowResponses = dataStr; // 提取data字段的值
                    // console.log(JSON.parse(dataStr),'flowResponses');
                  } else if (eventType == "answer" || eventType == "flowNodeStatus") {
                    if (dataStr == "[DONE]") {
                      //消息返回结束了,但是后面还有引用的内容
                    } else {
                      data_decoded = dataStr; // 提取data字段的值
                    }
                  } else {
                    // flowResponses_context = message
                  }
                  let fast_data = JSON.parse(data_decoded);
                  // console.log(decoded);
                  // console.log(fast_data, eventType);
                  // console.log(flowResponses, eventType,"flowResponses");
                  // console.log(flowResponses_context,'flowResponses_context');
                  // 处理数据，例如更新UI
                  // this.updateUI(fast_data.choices[0].delta.content);

                  if (eventType == "answer" && fast_data != null && fast_data.choices != undefined) {
                    if (fast_data.choices[0].finish_reason == "stop") {
                    } else {
                      const response = fast_data.choices[0].delta.content ? fast_data.choices[0].delta.content : "";
                      chatList.value[currentResLocation].msg = chatList.value[currentResLocation].msg + response;
                    }
                  } else {
                    // console.log(flowResponses );
                    chatList.value[currentResLocation].flowResponses = flowResponses;
                  }
                } catch (e) {
                  console.error("Failed to parse JSON", e);
                }
              });

              return readStream(reader);
            });
          }
          readStream(reader);
        });
    }
  } else if (modelClassify.value == "1") {
    // 通用模型
    if (ModelListRow.value.value == 108) {
      //知识库问答
      // await chatWindowApi
      //   .apiEnterpriseFilesTreeKnowledgeGet({
      //     q: messages[messages.length - 1].content
      //   })
      //   .then((res: any) => {
      //     msgLoading.value = false;
      //     chatList.value[currentResLocation].msg = res.result.response;
      //     moreRequestData(messages);
      //     scrollBottom();
      //   });
    } else if (ModelListRow.value.value == 109 || ModelListRow.value.value == 110) {
      //知识库文档FastGPT和本地的chatCLM3-------------------------------------------start
      let url = "";
      let objParams = {};
      if (ModelListRow.value.value == 109) {
        url = "api/v1/chat/completions";
        objParams = {
          messages: messages,
          stream: true,
          detail: false
        };
      } else if (ModelListRow.value.value == 110) {
        url = "v1/chat/completions";
        objParams = {
          model: "chatglm3-6b",
          messages: messages,
          stream: true,
          max_tokens: 100,
          temperature: 0.8,
          top_p: 0.8
        };
      }
      await fetch(knowledge_base.value.base_url + url, {
        method: "POST",
        timeout: 120000,
        headers: {
          Authorization: `Bearer ${knowledge_base.value.fastGptKey}`,
          "Content-Type": "application/json"
        },
        body: JSON.stringify(objParams)
      })
        .then((response) => {
          return response;
        })
        .then((response) => {
          // console.log(response);
          const reader = response.body.getReader();
          // let _this = this;
          function readStream(reader) {
            return reader.read().then(({ done, value }) => {
              if (done) {
                return;
              }
              if (!chatList.value[currentResLocation].reminder) {
                chatList.value[currentResLocation].reminder = "";
              }
              let decoded = new TextDecoder().decode(value);
              decoded = chatList.value[currentResLocation].reminder + decoded;
              let decodedArray = decoded.split("data:");
              decodedArray.forEach((decoded) => {
                if (decoded.trim() !== "") {
                  if (decoded.trim() === "[DONE]") return;
                  let fast_decoded = JSON.parse(decoded).choices;
                  // console.log(fast_decoded, "fast_decoded");
                  if (fast_decoded[0].finish_reason == "stop") {
                    msgLoading.value = false;
                    moreRequestData(messages);
                    return;
                  } else {
                    const response = fast_decoded[0].delta.content ? fast_decoded[0].delta.content : "";
                    chatList.value[currentResLocation].msg = chatList.value[currentResLocation].msg + response;
                    scrollBottom();
                  }
                }
              });
              return readStream(reader);
            });
          }
          readStream(reader);
        });
      //知识库文档FastGPT和本地的chatCLM3----------------------------------------------------end
    } else {
      // 其他gpt问答
      // console.log(messages,'messages');
      // await fetch(base.baseUrl + "/api/chat/stream", {
      await fetch(ModelListRow.value.modelUrl + "/api/chat/stream", {
        method: "POST",
        timeout: 120000,
        body: JSON.stringify(messages),
        headers: headers
      })
        .then((response) => {
          return response;
        })
        .then((response) => {
          // console.log(response,11);
          // if (response.ok == false) {
          //   this.$message.error("接口错误,请重试!!!");
          //   _this.msgLoading = false;
          //   return;
          // }
          // console.log(response,'response');
          if (response.status == 401) {
            proxy.$modal.msgError(proxy.$t("chatGpt.chatMsg2"));
            msgLoading.value = false;
            return;
          } else if (response.status == 402) {
            proxy.$modal.msgError(proxy.$t("chatGpt.chatMsg3"));
            msgLoading.value = false;
            return;
          } else if (response.status == 405) {
            proxy.$modal.msgError(proxy.$t("chatGpt.chatMsg4"));
            msgLoading.value = false;
            return;
          } else if (response.status == 409) {
            proxy.$modal.msgError.msgError(proxy.$t("chatGpt.chatMsg5"));
            msgLoading.value = false;
            return;
          } else if (response.status == 411 || response.status == 400) {
            proxy.$modal.msgError(proxy.$t("chatGpt.chatMsg6"));
            msgLoading.value = false;
            return;
          } else if (response.status == 429) {
            proxy.$modal.msgError(proxy.$t("chatGpt.chatMsg7"));
            msgLoading.value = false;
            return;
          } else if (response.status == 500) {
            proxy.$modal.msgError(proxy.$t("chatGpt.chatMsg8"));
            msgLoading.value = false;
            return;
          }
          const reader = response.body.getReader();
          // let _this = this;
          function readStream(reader) {
            return reader.read().then(({ done, value }) => {
              if (done) {
                if (chatModelType.value == 2) {
                  //清华为什么写这里,因为清华没有回答结束标识---清华定位
                  msgLoading.value = false;
                  moreRequestData(messages);
                }
                return;
              }
              if (!chatList.value[currentResLocation].reminder) {
                chatList.value[currentResLocation].reminder = "";
              }
              let decoded = new TextDecoder().decode(value);
              decoded = chatList.value[currentResLocation].reminder + decoded;
              let decodedArray = decoded.split("data:");

              decodedArray.forEach((decoded) => {
                if (decoded.trim() !== "") {
                  if (decoded.trim() === "[DONE]") return;
                  //  if(_this.chatModelType == 0){
                  //   /**gpt-4 */
                  //   let g4_decoded = JSON.parse(decoded).choices;
                  //   if(g4_decoded.length!=0){

                  //   }
                  //   console.log(g4_decoded);
                  // }else
                  if (chatModelType.value == 1 || chatModelType.value == 0 || chatModelType.value == 7 || chatModelType.value == 8) {
                    /**openai的返回结构 1:gpt3   0:gpt4  7:gpt4 32k  8:gpt4o*/
                    let o_decoded = JSON.parse(decoded).choices;
                    if (o_decoded.length == 0) {
                      return;
                    }
                    if (o_decoded[0].finish_reason != null) {
                      msgLoading.value = false;
                      moreRequestData(messages);
                      return;
                    } else {
                      const response = o_decoded[0].delta.content ? o_decoded[0].delta.content : "";
                      chatList.value[currentResLocation].msg = chatList.value[currentResLocation].msg + response;
                      scrollBottom();
                    }
                  } else if (chatModelType.value == 2) {
                    //清华的创建和更新消息写在前面,搜索标识符--清华定位
                    /**清华 */
                    let q_decoded = decoded;
                    chatList.value[currentResLocation].msg = chatList.value[currentResLocation].msg + q_decoded.replace("\n\n", "");
                    scrollBottom();
                  } else if (chatModelType.value == 3) {
                    /**文心一言的chatgpt返回结构 */
                    let w_decoded = JSON.parse(decoded);
                    if (w_decoded.is_end) {
                      msgLoading.value = false;
                      moreRequestData(messages);
                      return;
                    } else {
                      const response = w_decoded.result ? w_decoded.result : "";
                      chatList.value[currentResLocation].msg = chatList.value[currentResLocation].msg + response;
                      scrollBottom();
                    }
                  } else if (chatModelType.value == 4) {
                    /**阿里通义 */
                    let a_decoded = JSON.parse(decoded);
                    // console.log(a_decoded);
                    if (a_decoded.choices[0].finish_reason == "stop") {
                      msgLoading.value = false;
                      moreRequestData(messages);
                    }
                    // const response = a_decoded.output.text ? a_decoded.output.text.replace(_this.chatList[currentResLocation].msg, "") : "";
                    const response = a_decoded.choices[0].delta.content ? a_decoded.choices[0].delta.content : "";
                    chatList.value[currentResLocation].msg = chatList.value[currentResLocation].msg + response;
                    scrollBottom();

                    // console.log(a_decoded,3);
                  } else if (chatModelType.value == 5) {
                    /**讯飞星火2.0 */
                    let x_decoded = JSON.parse(decoded);
                    if (x_decoded.usage != undefined) {
                      msgLoading.value = false;
                      moreRequestData(messages);
                    }
                    const response = x_decoded.choices[0].delta.content ? x_decoded.choices[0].delta.content : "";
                    chatList.value[currentResLocation].msg = chatList.value[currentResLocation].msg + response;
                    scrollBottom();
                  } else if (chatModelType.value == 9) {
                    //Moonshot AI（Kimi）
                    let k_decoded = JSON.parse(decoded);
                    // console.log(k_decoded);
                    if (k_decoded.choices[0].finish_reason == "stop") {
                      msgLoading.value = false;
                      moreRequestData(messages);
                    }
                    const response = k_decoded.choices[0].delta.content ? k_decoded.choices[0].delta.content : "";
                    chatList.value[currentResLocation].msg = chatList.value[currentResLocation].msg + response;
                    scrollBottom();
                  }else if(chatModelType.value == 10 || chatModelType.value == 11){
                    /**deepseek v3 */
                    let dv3_decoded = JSON.parse(decoded);
                    if(dv3_decoded.choices[0].finish_reason == "stop"){
                      msgLoading.value = false;
                      moreRequestData(messages);
                    }
                    const response = dv3_decoded.choices[0].delta.content ? dv3_decoded.choices[0].delta.content : "";
                    chatList.value[currentResLocation].msg = chatList.value[currentResLocation].msg + response;
                    scrollBottom();
                  }
                  // else if(chatModelType.value == 11){
                  //   /**deepseek r1 */
                  //   let dr1_decoded = JSON.parse(decoded);
                  //   console.log(dr1_decoded,'dr1_decoded');

                  //   if(dr1_decoded.choices[0].finish_reason == "stop"){
                  //     msgLoading.value = false;
                  //     moreRequestData(messages);
                  //   }
                  //   const response = dr1_decoded.choices[0].delta.content ? dr1_decoded.choices[0].delta.content : "";
                  //   // chatList.value[currentResLocation].msg = chatList.value[currentResLocation].msg + response;
                  //   // scrollBottom();
                  // }


                  /**文心一言的chatgpt返回结构 */
                  // if (JSON.parse(decoded).result != undefined) {
                  //   let w_decoded = JSON.parse(decoded);
                  //   if (w_decoded.is_end) {
                  //     //is_end为true结束聊天
                  //     _this.msgLoading = false;
                  //     _this.moreRequestData(messages);
                  //     return;
                  //   } else {
                  //     const response = w_decoded.result ? w_decoded.result : "";
                  //     _this.chatList[currentResLocation].msg = _this.chatList[currentResLocation].msg + response;
                  //     _this.scrollBottom();
                  //   }
                  // } else {
                  //   /**openai的返回结构 */
                  //   console.log(decoded);
                  //   let o_decoded = JSON.parse(decoded).choices[0];
                  //   if (o_decoded.finish_reason != null) {
                  //     //流式返回-返回结束
                  //     _this.msgLoading = false;
                  //     _this.moreRequestData(messages);
                  //     return;
                  //   } else {
                  //     const response = JSON.parse(decoded).choices[0].delta.content ? JSON.parse(decoded).choices[0].delta.content : "";
                  //     _this.chatList[currentResLocation].msg = _this.chatList[currentResLocation].msg + response;
                  //     _this.scrollBottom();
                  //   }
                  // }

                  // if (decoded.trim() === "[DONE]") {
                  //   //流式返回-返回结束
                  //   data.vanLoading = false;
                  //   moreRequestData(messages)
                  //   return;
                  // } else {
                  //   // console.log(JSON.parse(decoded).choices[0]);
                  //   const response = JSON.parse(decoded).choices[0].delta.content ? JSON.parse(decoded).choices[0].delta.content : "";
                  //   data.chatList[currentResLocation].msg = data.chatList[currentResLocation].msg + response;
                  //   scrollBottom();
                  // }
                }
              });
              return readStream(reader);
            });
          }
          readStream(reader);
        })
        .catch((err) => {
          msgLoading.value = false;
          proxy.$model.notifyError(proxy.$t("chatGpt.chatMsg9"))
          // this.$notify.error({
          //   title: "请检查余额是否充足",
          //   message: "联系管理员或点击查看余额",
          //   onClick: this.openMoneyDialog,
          // });
        });
    }
  }
}
// 整合机器人返回结束其他请求的处理
const moreRequestData = (messages: any) => {
  // 处理创建会话和知乎部分
  let createParams = {};
  let updateParams = {};
  if (isContextShow.value) {
    // 语境中心
    if (messages.length == 2) {
      createParams = {
        title: messages[0].content,
        record: JSON.stringify(chatList.value),
        reCount: chatList.value.length,
        assistantId: assistantId.value,
        userId: userStore.userId,
      };

      apiChatReCreate(createParams);
    }
    if (messages.length > 2) {
      updateParams = {
        id: chatListId.value,
        record: JSON.stringify(chatList.value),
        reCount: chatList.value.length,
        assistantId: assistantId.value,
        userId: userStore.userId,
      };

      apiChatReModify(updateParams);
    }
  } else {
    //普通问答
    if (messages.length == 1) {
      // 创建会话
      createParams = {
        title: messages[0].content,
        record: JSON.stringify(chatList.value),
        reCount: chatList.value.length,
        userId: userStore.userId,
      };

      apiChatReCreate(createParams);
    }
    if (messages.length > 1) {
      //更新会话
      updateParams = {
        id: chatListId.value,
        record: JSON.stringify(chatList.value),
        reCount: chatList.value.length,
        userId: userStore.userId,
      };

      apiChatReModify(updateParams);
    }
  }

  // 知乎部分
  let zhihuParams = {
    title: messages[messages.length - 1].content,
    text: chatList.value[chatList.value.length - 1].msg,
    type: isContextShow.value ? 14 : 21, //14语境中心,21:普通对话
    tap: 2, //1是富文本 2 Markdown
    chatClassifyId: ContextMessage.value.type ? ContextMessage.value.type : "",
    chatClassifyName: ContextMessage.value.titleName ? ContextMessage.value.titleName : ""
  };

  apiKownChatInsertChatQuestion(zhihuParams);
}

// 请求接口参数处理
const requestParameterProcessing = (params: any) => {
  // 为什么这样写,如果不这样写,deepseek返回的标签<detail>在后端存不了
  const jsonString = JSON.stringify(params);
  //将JSON字符申写入一个BLob对象
  const blob = new Blob([jsonString], { type: 'application/json' });
  //创建一个FormData对象
  const formData = new FormData();
  formData.append('file', blob, 'data.json');
  return formData
}

//创建对话- 消息发送成功之后创建对话api
const apiChatReCreate = (params: any) => {
  aiqaWikiRecordCreate(requestParameterProcessing(params))
    .then((res: any) => {
      if (isContextShow.value) {
        apiHelperGet();
      } else {
        apiChatReGet();
      }
      chatListId.value = res.data.id;
    })
    .catch((err) => {
      proxy.$modal.msgError(proxy.$t("chatGpt.chatMsg10"));
    });
}
//更新会话-消息发送成功之后更新会话api
const apiChatReModify = (params: any) => {
  aiqaWikiRecordUpdate(requestParameterProcessing(params))
    .then((res: any) => {
      if (isContextShow.value) {
        apiHelperGet();
      } else {
        apiChatReGet();
      }
    })
    .catch((err) => {
      proxy.$modal.msgError(proxy.$t("chatGpt.chatMsg11"));
    });
}

//知乎创建问题
const apiKownChatInsertChatQuestion = (params: any) => {
  // chatWindowApi.apiKownChatInsertChatQuestion(params).catch((err) => {
  //   proxy.$modal.msgError(proxy.$t("chatGpt.chatMsg12"));
  // });
}
// 发送消息
const sendMsg = (chatLists: any) => {
  chatList.value.push(chatLists);
  scrollBottom();
}

const chatContentRefs = ref()
//获取窗口高度并滚动至最底层
const scrollBottom = () => {
  nextTick(() => {
    setTimeout(() => {
      const scrollDom = chatContentRefs.value;
      proxy.$yuUtils.animation(scrollDom, scrollDom.scrollHeight - scrollDom.offsetHeight);
    }, 300);
  });
}
const chatMoenyInfoDialogRefs = ref()
// 查看余额
const openMoneyDialog = () => {
  chatMoenyInfoDialogRefs.value.callingChildren();
  chatMoenyInfoDialogRefs.value.visibleDialog = true;
}
/**发送消息=================================================end */

/**顶部导航事件 ---------------------------------start*/
//菜单选择
const handleCommand = (command: any) => {
  if (command == "logout") {
  }
  if (command == "zhihu") {
    router.push({ path: "/zhihu/knowledge" });
  }
  if (command == "system") {
    router.push({ path: "/dashboard" });
  }
}

/**顶部导航事件 ---------------------------------end*/

/**语境中心(智能体)====================================start */
// 获取语境中心用户列表--左侧的语境中
const apiHelperGet = () => {
  leftLoading.value = true;
  chatAgentApi
    .apiHelperGet({
      page: requestStr.value.page,
      size: requestStr.value.size,
      userId: userStore.userId,
      sort: "id,desc"
    })
    .then((res: any) => {
      leftLoading.value = false;
      contextList.value = res.rows;
      requestStr.value.total = res.total;
      requestStr.value.pageCount = res.pageSize;
    })
    .catch((err) => {
      leftLoading.value = false;
    });
}
// 查询单条语境中心
const apiChatReGetAssistant = (row: any) => {
  chatAgentApi
    .apiWikiRecordGetAssistant({
      userId: userStore.userId,
      assistantId: assistantId.value
    })
    .then((res: any) => {
      if (res.data) {
        chatList.value = res.data.length == 0 ? [] : JSON.parse(res.data[0].record);
        chatListId.value = res.data.length == 0 ? "" : res.data[0].id;
      }
    });
}
//  给用户添加/删除语境中心
const apiHelperAddHelper = (item: any) => {
  if (item.status == "未添加") {
    chatAgentApi
      .apiHelperAddHelper({
        assistantId: item.id,
        userId: userStore.userId
      })
      .then((res) => {
        proxy.$modal.msgSuccess(proxy.$t("commen.success"));
        item.status = "已添加";
        apiHelperGet();
        contextClick(item);
      })
      .catch((err) => {
        proxy.$modal.msgError(proxy.$t("commen.error"));
      });
  } else {
    chatAgentApi
      .apiHelperDelHelper({
        assistantId: item.id,
        userId: userStore.userId
      })
      .then((res) => {
        proxy.$modal.msgSuccess(proxy.$t("commen.success"))
        item.status = "未添加";
        if (assistantId.value == item.id) {
          newCreateChatClick(2);
        }
        apiHelperGet();
      })
      .catch((err) => {
        proxy.$modal.msgError(proxy.$t("commen.error"))
      });
  }
}
// 点击了语境中心的某一项
const contextItemClick = (item: any) => {
  if (item.status == "未添加") {
    apiHelperAddHelper(item);
  } else {
    contextClick(item);
  }
  leftTabsActive.value = "context";
  // this.contextClick(item);
}
const enterInfoClick = (e: any) => {
  contextItemClick(e);
}

// 语境中心(智能体)组件事件---跳转
const skipChatpage_YuContextAll = (item: any) => {
  contextClick(item)
}

// 语境中心(智能体)组件事件---添加或者删除
const addOrdelClick_YuContextAll = (item: any) => {
  apiHelperAddHelper(item)
}
/**语境中心(智能体)====================================end */

/** 输入框输入事件 ====================================start*/
const enterSubmit = (e) => {
  e.preventDefault();
  sendText()
}
const sendTextInput = (e) => {
  if (e == "/") {
    callWordDiv.value = true;
    getTableData();
  } else {
    callWordDiv.value = false;
  }
}
// 键盘按下事件--阻止回车换行,执行ctrl + enter换行
const handleKeyPress = (event: any) => {
  if (event.keyCode == 13) {
    if (!event.ctrlKey) {
      event.preventDefault();
    } else {
      inputMsg.value += "\n";
    }
  }
}
// 失去焦点事件
const sendTextBlur = (e: any) => {
  if (inputMsg.value != "") {
    isInputModelBox.value = true;
  } else {
    isInputModelBox.value = false;
  }
}
//聚焦事件
const sendTextFocus = (e?: any) => {
  textInputRefs.value.focus();
  isInputModelBox.value = true; //显示输入框上面选择模版部分
}
/** 输入框输入事件 ====================================end*/

/**提示词=======================================start */

const getTableData = () => {
  if (requestStr_callWord.value.page > requestStr_callWord.value.pageCount) {
    requestStr_callWord.value.page = 1;
  }
  requestStr_callWord_Loading.value = true;
  chatAgentApi
    .aiqaPromptGet({
      pageNum: requestStr_callWord.value.page,
      pageSize: requestStr_callWord.value.size,
      sort: "id,desc"
    })
    .then((result: any) => {
      requestStr_callWord_Loading.value = false;
      requestStr_callWord.value.total = result.total;
      requestStr_callWord.value.pageCount = result.pageSize;
      callWordList_one.value = result.rows;
      if (requestStr_callWord.value.page == 1) {
        callWordList_two.value = result.rows;
      }
      requestStr_callWord.value.page += 1;
    })
    .catch((err) => {
      requestStr_callWord_Loading.value = false;
    });
}
// 单击了提示词
const callWordListClick = (v: any) => {
  // console.log(v);
  inputMsg.value = v.prompt;
  callWordDiv.value = false;
  isRightDivShow.value = "chatList";
  clearDataFunc();
}
// 点击了提示词的查看更多
const callWordList_moreClick = () => {
  isRightDivShow.value = "isCollWordList";
}
/**提示词=======================================end */

/**模型================= */
const chatModelType_input = (e: any, item: any) => {
  sendTextFocus();
  // if (e == 109 || e == 108 || e == 110) {
  //   ModelListRow.value = knowledge_base_list.value.find((item) => item.value == e);
  // } else {
  console.log(item);
  ModelListRow.value = item
  // }
}
/**下载 */
const downloadChatListClick = () => {
  sendTextFocus();
  if (chatListId.value == "") {
    proxy.$modal.msgWarning(proxy.$t("chatGpt.chatMsg13"));
  } else {
    let jsonString = JSON.stringify(chatList.value); // 将数组转为JSON字符串
    let blob = new Blob([jsonString], {
      type: "application/json;charset=utf-8"
    });
    saveAs(blob, "data.json");
  }
}
// 展开导航  智能探索
const getNavCommand = (e: any) => {
  isShowNavList.value = e;
}

/**跳转到工作台 */
const skipPageClick = () => {
  router.push({ path: "/" });
}

//查看知识库文档列表
const syncKnowledgeListRefs = ref()
const openFileList = () => {
  sendTextFocus();
  syncKnowledgeListRefs.value.visibleDialog = true;
}
/**fastgpt知识库应用管理*/
//解析知识库文档应用
const textJsonParseFunc = (str: any) => {
  // console.log(str);
  try {
    return JSON.parse(str)[0];
  } catch (error) {
    console.log(error, "textJsonParseFunc");
    return {
      quoteList: [],
      runningTime: 0
    };
  }
}
// 显示应用文档
const showFastQuoteDocClick = (str: any) => {
  try {
    let quoteList = JSON.parse(str)[0].quoteList;
    const sourceNames = new Set(quoteList.map((item) => item && item.sourceName));
    const uniqueSourceNames = Array.from(sourceNames);
    return uniqueSourceNames;
    // console.log(uniqueSourceNames);
  } catch (error) {
    // console.log(error, "showFastQuoteDocClick");
    return [];
  }
}
// 打开知识库引用对话框
const FastGptQuoteRefs = ref()
const openFastGptQuoteClick = (val: any) => {
  try {
    FastGptQuoteRefs.value.quoteList = JSON.parse(val)[0].quoteList;
  } catch (error) {
    FastGptQuoteRefs.value.quoteList = [];
  }
  FastGptQuoteRefs.value.visibleDialog = true;
}
// 打开文档工具对话框
const openDocIdeaDrawer = () => {
  isDocIdeaDrawer.value = true;
}
// 关闭文档工具对话框
const closeDocIdeaDrawer = () => {
  isDocIdeaDrawer.value = false;
}
// 点击了文档工具其中的一个
const docIdeaToolQARefs = ref()
const docToolClick_docIdeaDrawer = (val: any, docList: any) => {
  isShowNavList.value = "docTool";
  nextTick(() => {
    docIdeaToolQARefs.value.documentList = docList;
    docIdeaToolQARefs.value.toolType = val;
  });
}
// 文档工具聊天页面
// 返回正常聊天
const gobackClick_docIdeaToolQA = () => {
  isShowNavList.value = "contextualAndDialogue";
}
/**语言录入---------------satrt */

// 开始录音
const startRecordAudio = () => {
  //@ts-ignore
  Recorder?.getPermission().then(
    () => {
      // console.log("开始录音");
      recorder.start(); // 开始录音
      inputMsg.value = "";
      isSpeakType.value = 2;
    },
    (error) => {
      proxy.$modal.msgWarning('请先允许该网页使用麦克风');
      // console.log(`${error.name} : ${error.message}`);
    }
  );
}
//停止录音
const stopRecordAudio = () => {
  // console.log("停止录音");
  recorder.stop();
  var wavBlob = recorder.getWAVBlob();
  isSpeakType.value = 3;
  var formData = new FormData();
  const newbolb = new Blob([wavBlob], { type: 'audio/wav' })
  // //获取当时时间戳作为文件名
  const fileOfBlob = new File([newbolb], new Date().getTime() + '.wav')
  formData.append("file", fileOfBlob);
  axios
    .post("/stt", formData, {
      headers: {
        "Content-Type": "multipart/form-data"
      }
    })
    .then((res) => {
      console.log(res);
      inputMsg.value = res.data;
      isSpeakType.value = 1;
      textInputRefs.value.focus();
    })
    .catch((err) => {
      isSpeakType.value = 1;
      proxy.$modal.msgError("语音识别失败，请重试");
    });
}
/**语言录入---------------end */

const handelChunkData = (chunk: any) => {
  chunk = chunk.trim()
  if (chunkValue.value) {
    chunk = chunkValue.value + chunk;
    chunkValue.value = "";
  }
  if (chunk.includes('[DONE]')) {
    return chunk;
  }
  if (chunk[chunk.length - 1] !== '}') {
    chunkValue.value = chunk;
  }
  return chunk;
}
// 默认图片转换
const imageDefaultFunc = (img: any) => {
  // let imgurl = require("@/assets/images/chatgpt/ai3.png");
  // let src = img ? this.$store.state.api.imageBaseUrl + img : imgurl;
  // return src;
}
//复制
const copyClick = async (textToCopy: any) => {
  try {
    // await navigator.clipboard.writeText(textToCopy);
    if (proxy?.$yuUtils.YUcopyToClipboard(textToCopy)) {
      proxy?.$modal.msgSuccess('已复制到剪贴板!');
    } else {
      proxy.$modal.msgError('复制失败!');
    }
  } catch (err) {
    proxy.$modal.msgError('复制失败!');
    console.log(err);
  }
}
</script>

<style scoped lang="scss">
$fontColor: #272a37;
$headerHeight: 70px;
$footHeight: 200px;
$leftWidth1: 70px;
$leftWidth2: 270px;
$rightCenterWidth: 845px;

@mixin textOverflow($clamp) {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: $clamp; //元素几行显示
  -webkit-box-orient: vertical;
}

//  .el-main{
//   overflow: hidden;
// }
.chatGpt_bark {
  background-color: #f6f7f9 !important;
}

.chatGPt {
  background-color: #f6f7f9;
  width: 100%;
  height: calc(100vh - 50px);

  .chat_body {
    display: flex;
    height: 100%;
    // background-color: #43436b;
    // overflow-x: auto;
  }

  .left_width1 {
    animation: slide-left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  }

  .left_width2 {
    animation: slide-right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  }

  @keyframes slide-left {
    0% {
      min-width: $leftWidth2;
    }

    100% {
      min-width: $leftWidth1;
    }
  }

  @keyframes slide-right {
    0% {
      min-width: $leftWidth1;
    }

    100% {
      min-width: $leftWidth2;
    }
  }

  .chat_left_dark {
    background-color: #1e2f4c !important;
  }

  .chat_left_light {
    background: #7f7fd5 !important;
    background: -webkit-linear-gradient(135deg, #7859fd 0%, #636efc 19%, #31d1fb 100%) !important;
    background: linear-gradient(135deg, #7859fd 0%, #636efc 19%, #31d1fb 100%) !important;
  }

  .chat_left {
    min-width: $leftWidth2;
    // width: 470px !important;
    // max-width: 470px;
    display: flex;
    height: 100%;
    // background-color: #f2f4ff;
    position: relative;

    .left_box {
      position: relative;
      z-index: 20;
      width: 100%;
      height: 100%;
      background: #ffffff;
      // background: -webkit-linear-gradient(135deg, #7859fd 0%, #636efc 19%, #31d1fb 100%);
      // background: linear-gradient(135deg, #7859fd 0%, #636efc 19%, #31d1fb 100%);
      // box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.302);
      // border-radius: 0 28px 28px 0;
      border-right: 1px solid #eeeeee;
      background-clip: padding-box;
      padding: 20px 0 0;
    }

    .logoIcon {
      width: 35px;
      height: 35px;
      margin-right: 12px;
    }

    .left_header_box {
      width: 100%;
      padding: 0 16px;
    }

    .left_header {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left_header_logo {
        display: flex;
        align-items: center;
        cursor: pointer;
      }

      .title_box {
        display: flex;
        align-items: center;
      }

      .left_title1 {
        font-size: 22px;
        color: #000000;
        // font-weight: bold;
        // font-family: "QNHG";
        font-weight: bolder;
        font-family: "宋体";
      }

      .left_header_icon {
        display: flex;
        align-items: center;
      }

      .left_title2 {
        font-size: 13px;
        color: #898686;
        margin-right: 5px;
        cursor: pointer;
      }
    }

    .packUp_icon {
      rotate: 180deg;
    }

    .packUp_icon1 {
      cursor: pointer;
      margin-top: 2px;
    }

    .history_list {
      margin-top: 15px;

      :deep(.el-tabs__nav-scroll) {
        height: 50px;
      }

      :deep(.el-tabs__nav) {
        float: none;
        display: flex;
        justify-content: center;
      }

      :deep(.el-tabs__item) {
        color: #dbe5f6;
        font-size: 16px;
        padding: 0;
        width: 100px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      :deep(.el-tabs__item.is-active) {
        color: #edfdff;
      }

      :deep(.el-tabs__nav-wrap::after) {
        // background-color: #6884ff;
        background-color: #b0b0b0;
        height: 1px;
      }

      :deep(.el-tabs__active-bar) {
        background-color: #ffffff;
        width: 56px !important;
        left: 56px;
        bottom: -9px;
      }

      .tab_pane {
        height: calc(100vh - 245px);
        overflow-y: auto;
        padding: 0 16px;
      }

      .pagination_box {
        width: 100%;
        text-align: center;
      }

      .pagination {
        :deep(.el-pager li) {
          // background-color: rgba(0, 0, 0, 0);
          min-width: 28px;
          // color: #ffffff;
          padding: 0;
        }

        &:deep(button) {
          // background-color: rgba(0, 0, 0, 0) !important;
          // color: #ffffff;
          min-width: 28px;
        }

        // ::v-deep .el-pager li.active {
        //   color: #6f80f7;
        // }
      }

      .upload_title {
        &:deep(.el-input__inner) {
          border: 0;
          height: 22px;
          line-height: 22px;
          // @extend .list_item_box_active;
          // color: #ffffff;
          width: 180px;
        }
      }

      .list_item_box {
        display: flex;
        color: #f5faff;
        padding: 13px 16px;
        font-size: 16px;
        cursor: pointer;
        position: relative;
        height: 44px;

        img {
          width: 22px;
          height: 22px;
          margin-right: 4px;
        }

        .item_title {
          color: #f5faff;
          @include textOverflow(1);
        }
      }

      .delete_btn {
        position: absolute;
        right: 0;
        top: 0;
        height: 44px;
        line-height: 44px;
        // background-color: #6f80f7;
        @extend .list_item_box_active;
        opacity: 0;

        img {
          width: 16px;
          height: 16px;
          margin-right: 4px;
        }
      }

      .list_item_box_active {
        background-color: #f1f2f3;
      }

      .list_item_box:hover {
        @extend .list_item_box_active;
      }

      .list_item_box:hover .delete_btn {
        opacity: 1;
      }

      .context_box {
        display: flex;
        align-items: center;
        padding: 8px;
        font-size: 16px;
        cursor: pointer;
        position: relative;
        margin-bottom: 5px;
        border-radius: 10px;

        .triangle_box {
          width: 25px;
          height: 25px;
          background-color: #ffffff;
          border-radius: 50%;
          margin-right: 6px;

          .triangle_icon {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            line-height: 25px;
            text-align: center;
            font-size: 14px;
          }
        }

        .context_box_right {}

        .title {
          width: 190px;
          font-size: 15px;
          font-weight: 500;
          color: #3d3d3d;
          line-height: 16px;
          // margin-left: 23px;
          @include textOverflow(1);
        }
      }

      .delete_btn1 {
        position: absolute;
        right: 10px;
        top: 0;
        height: 41px;
        line-height: 41px;
        // background-color: #6f80f7;
        opacity: 0;

        img {
          width: 16px;
          height: 16px;
          margin-right: 4px;
        }
      }

      .context_box:hover {
        @extend .list_item_box_active;
      }

      .context_box:hover .delete_btn1 {
        opacity: 1;
      }
    }

    .unfold_btn_create {
      margin-top: 15px;
      display: flex;
      align-items: center;
      padding: 8px;
      border-radius: 10px;
      cursor: pointer;
      background-color: #f1f2f3;

      .create_text {
        font-size: 15px;
        color: #3d3d3d;
        margin-left: 6px;
      }
    }

    .unfold_btn {
      display: flex;
      // justify-content: space-between;
      margin-top: 20px;
      width: 100%;
      border-top: 1px solid #eeeeee;
      border-bottom: 1px solid #eeeeee;

      .btn1 {
        // width: 115px;
        flex: 1;
        height: 42px;
        line-height: 42px;
        padding: 0 20px;
        // text-align: center;
        color: #000000;
        font-size: 12px;
        font-weight: bold;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        // border-right: 1px solid #eeeeee;

        .img1 {
          width: 20px;
          height: 20px;
          margin-right: 4px;
        }

        .img2 {
          width: 14px;
          margin-right: 8px;
        }

        span {
          @include textOverflow(1);
        }
      }

      .btn1:hover {
        background-color: #f1f2f3;
      }
    }

    .leftBtnColor {
      background-color: #4971ee !important;
      border: 1px solid #8994e1 !important;
    }

    .leftBtnColor:hover {
      background-color: #859be0 !important;
    }

    .leftBtnColor-arrow {
      background-color: #ff8623 !important;
      border: 1px solid #8994e1 !important;
    }

    .leftBtnColor-arrow:hover {
      background-color: #eb9c5d !important;
    }

    .leftBtnColor-arrow:hover .btn_items {
      display: block !important;
    }

    .packup_class {
      width: $leftWidth1;
      height: calc(100% - 16px);
      animation: packup-animation 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
      position: relative;

      .packup_logo {
        // margin: 0 auto 34px;
        text-align: center;
        cursor: pointer;

        .logoIcon {
          margin: 0 0 30px;
        }
      }

      .packup_btn {
        .btn_icon {
          margin: 0 auto 24px;
          width: 42px;
          height: 42px;
          border-radius: 50%;
          border: 2px solid #2454ff;
          cursor: pointer;
          // background-color: #807eff;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 20px;
          color: #ffffff;
          position: relative;

          .img1 {
            width: 20px;
            height: 20px;
            margin-right: 4px;
          }
        }

        .btn_icon1 {
          margin: 0 auto 24px;
          width: 42px;
          height: 42px;
          cursor: pointer;
        }

        .img2 {
          width: 40px;
          height: 40px;
        }

        .btn_icon:hover {
          border-color: #2454ff;
          background-color: #5075fb;
        }
      }
    }

    .unfold_class {
      width: $leftWidth2;
      position: relative;
      height: 100%;
      animation: unfold-animation 0.31s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    }

    .left_bottom {
      // background-color: darkorange;
      position: absolute;
      bottom: 0px;
      z-index: 10;
      width: 100%;

      img {
        cursor: pointer;
      }

      .select_color {
        display: inline-block;
        border-radius: 8px;
        font-size: 0;
        margin-right: 150px;

        img {
          margin: 2px 4px;
        }
      }

      .select_color_dark {
        background-color: #38588f;
      }

      .select_color_light {
        background-color: #765afd;
      }

      .lfet_user_box {
        padding: 10px 10px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .user_info {
          display: flex;
          align-items: center;

          .user_text {
            margin-left: 8px;
          }
        }

        .user_avatar {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          overflow: hidden;
          border: 1px solid #eeeeee;
        }
      }
    }

    .left_bottom_packUp {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .chat_left_history {
    width: 200px;
    height: 100vh;
    background-color: #ffffff;

    .history_drawer {
      height: 100vh;
      overflow-y: auto;

      .history_list_box {
        height: calc(100vh - 192px);
        overflow-y: auto;
      }

      .history_title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px;
        font-size: 14px;
        font-weight: bold;

        i {
          cursor: pointer;
        }
      }

      .create_btn {
        background-color: #2454ff;
        font-size: 13px;
        font-weight: bold;
        color: #ffffff;
        margin: 12px;
        padding: 10px;
        border-radius: 6px;
        text-align: center;
        cursor: pointer;

        &:hover {
          background-color: #587cfc;
        }
      }

      .history_item_box {
        color: #3d3d3d;
        padding: 13px 16px;
        cursor: pointer;
        border-left: 2px solid #ffffff;
        margin-top: 3px;

        img {
          width: 22px;
          height: 22px;
          margin-right: 4px;
        }

        .item_title {
          font-size: 13px;
          color: #3d3d3d;
          @include textOverflow(1);
        }
      }

      .history_delete_btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #c3c8cf;
        font-size: 12px;
        margin-top: 6px;

        .del_icon {
          font-size: 14px;

          &:hover {
            color: #f56c6c;
          }
        }
      }

      .history_item_box_active {
        background-color: #f1f2f3;
        border-left: 2px solid #2454ff;

        .item_title {
          color: #476efc !important;
        }
      }

      .history_item_box:hover {
        @extend .history_item_box_active;
      }
    }

    .history_page {
      height: 41px;
      display: flex;
      align-items: center;

      // border-top: 1px solid #eeeeee;
      :deep(.el-pagination) {
        padding: 2px 0px;
      }

      :deep(.el-pagination .btn-next) {
        padding-left: 4px;
      }

      :deep(.el-pagination .btn-prev) {
        padding-right: 4px;
      }
    }
  }

  .history-enter-active {
    animation: history-right 0.3s both;
  }

  .history-leave-active {
    animation: history-right 0.3s both reverse;
  }

  @keyframes history-right {
    0% {
      transform: translateX(-200px);
    }

    100% {
      transform: translateX(0);
    }
  }

  .chat_right {
    background-color: #f6f7f9;
    flex: 1;
    position: relative;
    overflow-x: auto;
    // margin: 0 auto;
    min-width: $rightCenterWidth;

    .chat_header {
      width: 100%;
      height: $headerHeight;
      background-color: #f2f4ff;
      border-bottom: 1px solid #c3cad4;
      padding: 0 15px;

      .chat_header_box {
        width: 100%;
        height: $headerHeight;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .header_box_left {
        font-weight: bold;
        color: #8390f1;

        img {
          width: 140px;
        }
      }

      .header_box_right {
        display: flex;
        align-items: center;

        .line {
          width: 1px;
          height: 30px;
          background-color: #d8d8d8;
          margin: 0 20px;
        }

        .idea {
          i {
            font-size: 25px;
            cursor: pointer;
          }
        }
      }
    }

    .right_foot {
      width: 100%;
      position: absolute;
      // right: 0;
      bottom: 60px;

      .foot_box {
        width: $rightCenterWidth;
        margin: 0 auto;
        // overflow: hidden;
        transition: all 0.5s;
      }

      .call-word-input-true {
        animation: call-word-input-true 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
      }

      .call-word-input-false {
        animation: call-word-input-false 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
      }

      .call_word_list {
        // height: 111px;
        background: linear-gradient(180deg, #eeeffe 0%, #fcfdfe 100%);
        padding: 12px 15px;
        border-radius: 8px 8px 0 0;

        .one_row {
          font-size: 13px;
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
        }

        .one_row_left {
          display: flex;
          align-items: center;
          width: 660px;
          overflow-x: auto;
          white-space: nowrap;
        }

        .one_row_right {
          color: #777a9c;
          background: #fdfeff;
          border-radius: 3px;
          border: 1px solid #e1eaff;
          height: 33px;
          padding: 5px;
          cursor: pointer;
        }

        .two_row_right {
          color: #777a9c;
          background: #fdfeff;
          border-radius: 4px;
          border: 1px solid #cad5ef;
          padding: 9px 15px;
          cursor: pointer;
          display: flex;
          align-items: center;
        }

        .title {
          color: #43436b;
          margin-right: 10px;
        }

        .btn {
          color: #777a9c;
          background: #fdfeff;
          border-radius: 3px;
          border: 1px solid #e1eaff;
          padding: 8px 6px;
          margin-right: 10px;
          cursor: pointer;
        }

        .btn:hover,
        .two_row_right:hover,
        .one_row_right:hover {
          background-color: #8b97f4;
          color: #ffffff;
        }
      }

      .input_box_radius {
        border-radius: 8px;
      }

      .input_box_radius_0 {
        border-radius: 0px 0px 8px 8px;
      }

      .input_box {
        position: relative;
        z-index: 10;
        padding: 12px;
        background-color: #ffffff;
        transition: all 1.3s;
        // height: 158px;

        .input_box_top {
          display: flex;
          align-items: center;
          background-color: #ffffff;
          margin-bottom: 5px;

          .btn_div {
            font-size: 14px;
            margin-left: 16px;
            cursor: pointer;

            .el-select {
              width: 120px;
            }
          }

          .comes_with_history {
            color: #3d3d3d;
          }

          .select_msg_count {
            width: 80px !important;

            :deep(.el-select__wrapper) {
              border-radius: 16px;
            }
          }

          .model_classify {
            :deep(.el-input__inner) {
              border-radius: 16px;
            }
          }
        }

        .InputModelBox-enter-active {
          animation: input-box-top 0.3s both;
        }

        .InputModelBox-leave-active {
          animation: input-box-top 0.3s both reverse;
        }

        @keyframes input-box-top {
          0% {
            -webkit-transform: translateZ(-1400px);
            transform: translateZ(-1400px);
            opacity: 0;
          }

          100% {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            opacity: 1;
          }

          // 0% {
          //   transform: translateY(-20px);
          // }

          // 100% {
          //   transform: translateY(0);
          // }
        }

        .input_box_input {
          display: flex;
          align-items: flex-end;
        }

        .send_btn_box {
          display: flex;
          align-items: center;

          img {
            cursor: pointer;
          }
        }

        .send_btn {
          width: 67px;
          padding: 8px 0;
          text-align: center;
          border-radius: 8px;
          background-color: #5e7afc;
          color: #ffffff;
          margin-left: 16px;
          cursor: pointer;
        }
      }

      textarea::-webkit-scrollbar {
        width: 3px;
        /* 设置滚动条宽度 */
      }

      textarea::-webkit-scrollbar-thumb {
        background-color: rgb(66, 70, 86);
        /* 设置滚动条滑块的背景色 */
        border-radius: 50%;
        /* 设置滑块的圆角 */
      }

      .textInput1 {
        &:deep(.el-textarea__inner) {
          border: 0 !important;
          background-color: #00000000;
          box-shadow: 0 0 0 0 !important;
          font-size: 15px;
        }
      }

      .textarea {
        &:focus {
          outline: none;
        }
      }
    }
  }

  .ai_logo {
    width: 40px;
    height: 40px;
    margin: 0 15px 0 0px;
    // background-color: #5b9bfc;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 25px;

    .svgIconLogo {
      font-size: 40px;
    }

    img {
      width: 30px;
    }
  }

  .user-avatar {
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    // margin-top: 10px;
  }

  .call_word {
    // @extend .chit_chat;
    width: 100%;
    height: calc(100vh - $headerHeight - $footHeight);
    // padding: 40px 20px 20px;
    margin-top: 10vh;

    .call_wrod_box {
      // width: calc($rightCenterWidth + 105px);
      height: 100%;
      // margin-left: calc((100% - $rightCenterWidth - 200px) / 2);
      overflow-y: auto;
      // margin-top: 50px;
      display: flex;

      .left_logo {
        width: 40px;
        height: 40px;
        margin: 0 25px;
        background-color: #5b9bfc;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 25px;

        img {
          width: 30px;
        }
      }

      .right_content {
        width: $rightCenterWidth;
        margin: 0 auto;
      }
    }
  }

  .right_context_box {
    width: $rightCenterWidth;
    padding: 20px 0;
    margin: 0 auto;
  }

  .chit_chat {
    width: 100%;
    height: calc(100vh - $headerHeight - $footHeight);
    padding: 40px 10px 20px;
  }

  .chat_list {
    width: calc($rightCenterWidth - 10px);
    margin: 0 auto;
    // margin-left: calc((100% - $rightCenterWidth - 200px) / 2);
    height: 100%;
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 6px;
      /* 设置滚动条宽度 */
    }

    .list_item {
      display: flex;
      margin-bottom: 15px;
    }

    .chat_logoIcon {
      width: 50px;
      height: 50px;
      margin: 0 15px 0 0px;
    }

    .right_text_box {
      width: calc(100% - 100px);

      .name {
        font-size: 14px;
        font-weight: bold;
        color: #464358;
        margin-bottom: 12px;
        display: flex;
        align-items: center;

        img {
          margin-right: 8px;
        }
      }
    }

    .right_text_header {
      padding: 24px 20px 20px 26px !important;
      background-color: #ffffff;
      overflow: hidden;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    .right_text {
      // width: calc(100% - 100px);
      // padding: 24px 20px 20px 26px;
      border-radius: 15px 15px 15px 15px;
      color: #3d3d3d;
      font-size: 16px;
      margin-bottom: 15px;

      .ai_text1 {
        color: #5d78ea;
        line-height: 22px;
        margin-bottom: 4px;
      }

      .ai_text2 {
        line-height: 22px;
      }
    }
    
    .ai_right_text {
      background-color: #ffffff;
      overflow: hidden;
      padding-top: 10px;
      padding-bottom: 10px;

      .msgFileList {
        margin-top: 20px;

        .fileItem {
          display: flex;
          align-items: center;
          border: 1px solid #dcdfe6;
          width: 300px;
          border-radius: 8px;
          cursor: pointer;
        }
      }
      :deep(.md-editor-icon){
        width: 24px;
        height: 24px;
      }
      :deep(.md-editor-copy-button){
        font-weight: 600;
      }
      :deep(.md-editor-code-lang){
        font-weight: 600;
      }
    }

    .list_foot {
      display: flex;
      justify-content: space-between;
      margin-top: 12px;
      padding: 0 20px;

      .reanswer_btn {
        font-size: 12px;
        color: #8789ad;
        font-weight: 500;
        cursor: pointer;
        display: flex;
        align-items: center;

        img {
          margin-right: 5px;
        }
      }

      .copy {
        cursor: pointer;
      }
    }
  }
}

.model_list_box {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;

  .name_img {
    display: flex;
    align-items: center;

    img {
      margin-right: 6px;
    }

    span {
      font-size: 13px;
      font-weight: bold;
    }
  }
}

.model_list_btn {
  border: 1px solid #dcdfe6;
  padding: 5px 12px;
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #3d3d3d;
  border-radius: 17px;

  img {
    margin-right: 6px;
  }

  span {
    margin-right: 18px;
  }
}

@keyframes unfold-animation {
  0% {
    transform: translateX(-200px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes packup-animation {
  0% {
    transform: translateX(-100px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes call-word-input-true {
  0% {
    transform: translateY(100px);
    display: none;
  }

  100% {
    transform: translateY(0px);
    display: block;
  }
}

@keyframes call-word-input-false {
  0% {
    transform: translateY(0px);
    display: block;
  }

  100% {
    transform: translateY(90px);
    display: none;
  }
}

// -----
.btn_items {
  background-color: #fff;
  left: 58px;
  top: 3px;
  width: 88px;
  height: 95px;
  border-radius: 3px;
  color: #3d3d3d;
  font-size: 11px;
  font-family: "Microsoft YaHei";
  font-weight: 400;
  cursor: pointer;
  margin-top: 2px;

  .btn_item {
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0px 5px;
    margin: 0px 2px;
  }

  .btn_item:hover {
    background-color: #f3f8f9;
    border-radius: 5px;
  }

  .btn_item:hover img {
    background-color: #f3f8f9;
  }

  .img1 {
    width: 15px;
    height: 14px;
    margin-right: 4px;
  }
}

.dropdown-btn {
  margin-top: 20px;
  width: 100%;
  height: 42px;
  border-radius: 6px;
  background: #f58226;
  box-sizing: border-box;
  border: 1px solid #4097f6;
  text-align: center;
  line-height: 42px;
  cursor: pointer;

  .el-dropdown {
    width: 100%;
    border-radius: 10px;

    .title {
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      height: 40px;
      border-radius: 10px;

      .img1 {
        width: 20px;
        height: 20px;
      }

      .img2 {
        margin-left: 10px;
        width: 8px;
        height: 4px;
      }
    }
  }
}

.dropdown-btn :hover {
  background-color: #eb9c5d;
  height: 40px;
}

.navList {
  top: 108px !important;
  left: 15px;
  width: 239px;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .el-dropdown-menu__item {
    padding: 0px 25px;
    margin: 0px 5px;
    display: flex;
    align-items: center;
    border-radius: 5px;

    .svg-icon {
      width: 20px;
      height: 20px;
      margin-right: 15px;
    }
  }
}

.FastQuote {
  margin-top: 10px;
}

.falstelTag {
  margin-right: 5px;
  cursor: pointer;
}

.stop_box {
  display: flex;
  align-items: center;
  margin-top: 5px;
  padding-left: 20px;

  .stop_icon {
    margin-left: 5px;
    cursor: pointer;
  }
}

// --------
// 文档按钮
.doc_idea {
  position: fixed;
  right: 30px;
  top: 70px;

  .doc_idea_box {
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid #dbdfe4;
    background-color: #ffffff;
    font-size: 15px;
    cursor: pointer;

    &:hover {
      color: #2a59ff;
    }
  }
}

.dic_idea_drawer {
  position: fixed;
  right: 0;
  top: 50px;
  z-index: 50;
  min-width: 320px;
  max-width: 320px;
  height: 100vh;
  background-color: #ffffff;
}

.docIdea-enter-active {
  animation: docIdea-right 0.3s both;
}

.docIdea-leave-active {
  animation: docIdea-right 0.3s both reverse;
}

@keyframes docIdea-right {
  0% {
    transform: scale(0);
    transform-origin: 100% 0%;
    opacity: 1;
  }

  100% {
    transform: scale(1);
    transform-origin: 100% 0%;
    opacity: 1;
  }
}

/* From Uiverse.io by abrahamcalsin */
// 语言录入动画-------------------start
.voice_box {
  cursor: pointer;

  .SpeakType3 {
    width: 60px;
    font-size: 12px;
    color: #b3b0c3;
  }
}

.loaderRectangle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 3px;
}

.loaderRectangle div {
  width: 4px;
  height: 8px;
  animation: 0.9s ease-in-out infinite;
  background: #3662ec;
  box-shadow: 0 0 20px rgba(18, 31, 53, 0.3);
}

.loaderRectangle div:nth-child(1) {
  animation-name: rectangleOneAnim;
  animation-delay: 1s;
}

@keyframes rectangleOneAnim {
  0% {
    height: 8px;
  }

  40% {
    height: 15px;
  }

  100% {
    height: 8px;
  }
}

.loaderRectangle div:nth-child(2) {
  animation-name: rectangleTwoAnim;
  animation-delay: 1.1s;
}

@keyframes rectangleTwoAnim {
  0% {
    height: 8px;
  }

  40% {
    height: 20px;
  }

  100% {
    height: 8px;
  }
}

.loaderRectangle div:nth-child(3) {
  animation-name: rectangleThreeAnim;
  animation-delay: 1.2s;
}

@keyframes rectangleThreeAnim {
  0% {
    height: 8px;
  }

  40% {
    height: 25px;
  }

  100% {
    height: 8px;
  }
}

.loaderRectangle div:nth-child(4) {
  animation-name: rectangleFourAnim;
  animation-delay: 1.3s;
}

@keyframes rectangleFourAnim {
  0% {
    height: 8px;
  }

  40% {
    height: 20px;
  }

  100% {
    height: 8px;
  }
}

.loaderRectangle div:nth-child(5) {
  animation-name: rectangleFiveAnim;
  animation-delay: 1.4s;
}

@keyframes rectangleFiveAnim {
  0% {
    height: 8px;
  }

  40% {
    height: 15px;
  }

  100% {
    height: 8px;
  }

}
</style>
<!-- // 语言录入动画-------------------end -->
<style lang="scss">
.chat-gpt-page {
  top: 90px !important;
  padding: 0px !important;
  min-width: 90px;
  margin-left: 17px !important;
}

.navList {
  .popper__arrow {
    opacity: 0;
  }
}
</style>
